  <template>
  <div class="maptu">
    <!-- <div>{{ details }}</div> -->
    <div id="container"></div>
    <div width="330px" class="map_detail">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="风景" name="first" class="map_detail">
          <div id="panel"></div>
        </el-tab-pane>
        <el-tab-pane label="交通" name="second">
          <div id="panel2"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

  <script>
export default {
  props: ["details"],
  data() {
    return {
      activeName: "first",
      viewOrTrain: "交通",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(event.target.innerHTML);
      this.viewOrTrain = event.target.innerHTML;
      this.activeName = "second";
      this.getMap(this.viewOrTrain);
    },
    //封装地图方法
    async getMap(tabSelector) {
      var map = new AMap.Map("container", {
        zoom: 12, //级别
        center: [this.details.longitude, this.details.latitude], //中心点坐标
        viewMode: "3D", //使用3D视图
        // resizeEnable: true
      });

      AMap.service(["AMap.PlaceSearch"], () => {
        var placeSearch = new AMap.PlaceSearch({
          //构造地点查询类
          type: tabSelector == "交通" ? "地铁站" : tabSelector, // 兴趣点类别,
          //showButton: true, //是否显示定位按钮
          pageSize: 10, // 单页显示结果条数
          //pageIndex: 1, // 页码
          //city: "010", // 兴趣点城市
          citylimit: true, //是否强制限制在设置的城市内搜索
          map: map, // 展现结果的地图实例
          panel: tabSelector == "交通" ? "panel2" : "panel", // 结果列表将在此容器中进行展示。
          autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        //关键字查询
        // placeSearch.search("广州珠江帝景酒店");
        var cpoint = [this.details.longitude, this.details.latitude]; //中心点坐标====某个酒店的坐标
        //搜索的type类型
        // type可以为风景，可以为地铁站======点击tab传值进来
        // console.log(this.viewOrTrain);
        placeSearch.searchNearBy(tabSelector, cpoint, 5000, function (
          status,
          result
        ) {
          console.log(status, result); //搜索成功和失败的信息，搜索结果
        });
      });
    },
  },
  async mounted() {
    console.log("111111111111");
    //console.log(this.details);
    //初始化地图对象，加载地图
    window.onload = () => {
      console.log("2222222222");
      this.getMap("风景");
    };
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=ee3f5783511d84dfabd6f4c71cee0a12&callback=onLoad";
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },
};
</script>
<style lang="less" scoped>
.maptu {
  overflow: hidden;
  margin: 0 auto;
  width: 1000px;
  #container {
    float: left;
    width: 650px;
    height: 360px;
    margin: 40px 0 20px;
  }
  .map_detail {
    margin-top: 30px;
    float: right;
    position: relative;
    width: 330px;
    height: 300px;
    #panel {
      position: absolute;
      background-color: white;
      max-height: 100%;
      overflow-y: auto;
      top: -31px;
      right: 0px;
      width: 330px;
      /deep/.amap_lib_placeSearch {
        border: none;
      }
      /deep/.amap_lib_placeSearch_page {
        height: 0;
        padding: 0;
      }
      /deep/.amap_lib_placeSearch .poibox {
        border-bottom: none;
      }
    }
    #panel2 {
      width: 300px;
      height: 330px;
      border: 0;
      overflow-y: auto;
      /deep/.amap_lib_placeSearch_page {
        display: none;
      }
      /deep/.amap_lib_placeSearch .poibox {
        border-bottom: none;
      }
      /deep/.amap_lib_placeSearch {
        border: none;
      }
    }
  }
}
</style>